<template>
  <div id="login" style="background-size: 100% 800px" :style="{ backgroundImage: 'url(' + Img + ')' }">
    <div class="department">
      <img :src='require("@/assets/images/Logo2.png")' alt="" class="lg_logo" />
      <div class="title">
        <router-link to="login">
          <button class="blue login_title" >登录</button>
        </router-link>
        /
        <router-link to="register">
          <button class="gray register_title" >注册</button>
          </router-link>
      </div>

      <form id="form">
        <div class="input">
          <span></span>
          <div class="fl usename">
            <input type="text" placeholder="用户名" class="t_input" name="account" v-model="username" autocomplete="off"/>
          </div>
        </div>
        <div class="input pw">
          <span></span>
          <div class="fl pw_p">
            <input type="password" placeholder="输入密码" class="t_input" name="password" v-model="password" autocomplete="off"/>
          </div>
        </div>
        <div class="add">
          <div class="fl"><input type="checkbox" class="remb" v-model="rmb"/>记住密码</div>
          <router-link to="forget"><button href="#" class="fr fg">忘记密码</button></router-link>
        </div>
        <input type="button" value="登录" class="btn" @click="login"/>
      </form>
      <div class="title-line">
        <span class="tit">使用以下方式登录</span>
      </div>
      <div class="other">
        <span class="sport_qq"><a href="#" class="qq"></a></span>
        <span class="sport"><a href="#" class="wechat"></a></span>
        <span class="sport"><a href="#"></a></span>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>
<script>
  import PageFooter from '../components/PageFooter.vue'

  const Base64 = require('js-base64').Base64
  export default {
    name: "Login",
    data() {
      return {
        username: "",
        password: "",
        rmb: "",
        show_pw: false,
        show_tel: false,
        Img: require('@/assets/images/login.jpg'),
      };
    },
    created() {
      //在实例创建完成后被立即调用
      // 在页面加载时从cookie获取登录信息
      let username = this.getCookie("username")
      let password = Base64.decode(this.getCookie("password"))
      // 如果存在赋值给表单，并且将记住密码勾选
      if (username) {
        this.username = username
        this.password = password
        this.rmb = true
      }
    },
    components: {
      PageFooter
    },
    methods: {
      // 储存表单信息
      setUserInfo: function () {
        // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
        // 如果没有勾选，储存的信息为空
        if (this.rmb) {
          this.setCookie("username", this.username)
          // base64加密密码
          let password = Base64.encode(this.password)
          this.setCookie("password", password)
        } else {
          this.setCookie("account", "")
          this.setCookie("password", "")
        }
      },
      created() {
        //在实例创建完成后被立即调用
        // 在页面加载时从cookie获取登录信息
        let username = this.getCookie("username")
        let password = Base64.decode(this.getCookie("password"))
        // 如果存在赋值给表单，并且将记住密码勾选
        if (username) {
          this.username = username
          this.password = password
          this.rmb = true
        }
      },
      // 获取cookie
      getCookie: function (key) {
        if (document.cookie.length > 0) {
          let start = document.cookie.indexOf(key + '=')
          if (start !== -1) {
            start = start + key.length + 1
            let end = document.cookie.indexOf(';', start)
            if (end === -1) end = document.cookie.length
            return unescape(document.cookie.substring(start, end))
          }
        }
        return ''
      },
      // 保存cookie
      setCookie: function (cName, value, expiredays) {
        let exdate = new Date()
        exdate.setDate(exdate.getDate() + expiredays)
        document.cookie = cName + '=' + decodeURIComponent(value) +
                ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
      },
      login: function () {
        if (this.username != "" && this.pw != "") {
          this.$axios.post(
                  "https://pms.xybh.online/login/",
                  {"username": this.username, "password": this.password}
          ).then(
                  function (response) {
                    console.log(response)
                  },
                  function (error) {
                    console.log(error)
                  }
          )
          this.setUserInfo()
        } else {
          alert("请重新输入！");
        }
      },
    }
  }
</script>

<style scoped>
  .login_title {
    margin-right: 10px;
  }
  .register_title {
    margin-left: 10px;
  }
  .pw {
    margin-top: 15px;
  }
  .pw_p {
    border-bottom: 2px solid #666;
  }
  .usename {
    border-bottom: 2px solid #666;
  }
  .title-line .tit {
    height: 72px;
    line-height: 72px;
    margin: 0 auto;
    padding: 0 10px;
    font-size: 14px;
    text-align: center;
    background-color: #ebebeb;
  }
  .title-line {
    width: 270px;
    height: 36px;
    margin: 0px auto;
    border-bottom: 1px solid #666;
    text-align: center;
  }
  .other {
    width: 280px;
    height: 48px;
    margin: 28px auto 0px;
  }
  .lg_logo {
    width: 100px;
    height: 100px;
    margin-top: 159px;
  }
  .btn {
    width: 175px;
    height: 30px;
    margin-top: 30px;
    background-color: #0e60ff;
    color: white;
  }
  @font-face {
    font-family: "icomoon";
    src: url("../assets/fonts/icomoon.eot?we8owe");
    src: url("../assets/fonts/icomoon.eot?we8owe#iefix")
        format("embedded-opentype"),
      url("../assets/fonts/icomoon.ttf?we8owe") format("truetype"),
      url("../assets/fonts/icomoon.woff?we8owe") format("woff"),
      url("../assets/fonts/icomoon.svg?we8owe#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  a {
    text-decoration: none;
    color: black;
  }
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  .fg{
    background: rgba(0,0,0,0.00);
    border-radius: 0px;
    border: none;
    outline: none;
  }
  form {
    width: 225px;
    margin: auto auto;
  }
  input {
    outline-style: none;
    border: none;
    background-color: rgba(235,235, 235, .6);
    font-size: 16px;
    color: black;
  }
  #login{
    width: 100%;
    height: 100%;
  }
  .department {
    width: 350px;
    height: 800px;
    background-color:rgba(235,235, 235, .5);
    text-align: center;
  }
  .lg_logo {
    width: 100px;
    height: 100px;
    margin-top: 105px;
  }

  .blue {
    width: 56px;
    height: 36px;
    padding: 0px;
    background: rgba(0,0,0,0.00);
    border-radius: 0px;
    border: none;
    outline: none;
    font-size: 28px;
    font-family: Segoe UI, Segoe UI-Regular;
    font-weight: 400;
    text-align: left;
    color: #00a1ff;
  }
  .gray {
    width: 56px;
    height: 36px;
    padding: 0px;
    background: rgba(0,0,0,0.00);
    border-radius: 0px;
    border: none;
    outline: none;
    font-size: 28px;
    font-family: Segoe UI, Segoe UI-Regular;
    font-weight: 400;
    text-align: left;
    color: #999;
  }
  .title {
    font-size: 28px;
    font-family: Segoe UI, Segoe UI-Regular;
    margin: 35px auto;
  }
  .input {
    width: 250px;
    height: 30px;
  }


    .input span {
        float: left;
        width: 27px;
        height: 27px;
        font-family: "icomoon";
        font-size: 27px;
    }
    .t_input {
        width: 180px;
        height: 24px;
        padding-left: 7px;
    }
    .add {
        height: 19px;
        text-align: center;
        margin-top: 9px;
    }
    .remb {
        margin-right: 5px;
    }

    .btn {
        width: 175px;
        height: 30px;
        margin-top: 30px;
        background-color: #0e60ff;
        color: white;
    }
    .sport_qq {
        width: 48px;
        height: 48px;
        float: left;
        margin-left: 10px;
        font-family: "icomoon";
        font-size: 36px;
    }
    .sport {
        width: 48px;
        height: 48px;
        float: left;
        margin-left: 58px;
        font-family: "icomoon";
        font-size: 36px;
    }
    .qq{
        color: #0696d0;
    }
    .wechat{
        color: #8de055;
    }
</style>
